<template>
  <div>
  	<!--底部导航-->
  	<tab-bar @tabChange="loadTabView" ></tab-bar>
  </div>
</template>
<script>
import Vue from "vue";
import TabBar from './components/commons/tab-bar';
export default {
  components: {
    TabBar
  },
  created(){
  	const rem = Number(document.documentElement.getAttribute('rem'));
  	const pageBottom = rem *3.125;
  	
    function plusReady() {
    	//预加载一级路由列表
      let preWebView = [
	      {
	      	id:'home',
	      	url:'./home.html'
	      },
	      {
	      	id:'collect',
	      	url:'./collect.html'
	      },
	      {
	      	id:'message',
	      	url:'./message.html'
	      },
	      {
	      	id:'mine',
	      	url:'./mine.html'
	      }
      ];
			//预加载一级路由页面
			preWebView.map((webview)=>{
				plus.webview.create(
		      webview.url,
		      webview.id,
		      {
			  		top:0,
			  		bottom:pageBottom,
			  		popGesture:'none',
			  		render:'always',
			  		scrollIndicator:'none'
				  },
				  {
				  	routerView:true,
				  	rem:rem
				  }
				);
		  });
		  let home = plus.webview.getWebviewById('home');
		  home.addEventListener('rendered',function(){
		  	home.show();
		  })
    }
    if (window.plus) {
      plusReady();
    } else {
      document.addEventListener("plusready", plusReady, false);
    }
  },
  data() {
    return {
    	currentView:'home'
    };
  },
  methods: {
  	//路由切换
		loadTabView(e){	
				let newview = plus.webview.getWebviewById(e.id),
						oldview = plus.webview.getWebviewById(this.currentView);
				oldview.hide();
				this.currentView = e.id;
				newview.show();
		},
  }
};
</script>

<style lang="less">
:global {
  body {
    background-color: #f8f8f8;
    padding: 0;
    margin: 0;
    width: 750px;
    -webkit-font-smoothing: antialiased;
    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
  }
}
</style>
